<template>
<view class="page-all">
	<Header title="选择配餐单位" bgColor="#fff" :leftIconSize="20" ></Header>
  <view class="search-content">
    <view class="left">
      <uv-search placeholder="配餐单位名称" bgColor="#fff" v-model="keyword" :showAction="false" @change="searchFun()" @clear="clearFun()"  @blur="searchFun()"></uv-search>
    </view>
    <view class="screen-icon" @click="showScreen" v-if="areaList.length>0">
      <image v-if="iconFlag === true" src="@/static/image/index/icon2.png" mode="widthFix"></image>
      <image v-else src="@/static/image/index/icon1.png" mode="widthFix"/>
    </view>
  </view>
	<!--学校列表-->
  <view v-if="emptyFlag" class="empty-box">
    <uv-empty mode="data" icon="/static/image/no-data.png" width="200rpx" height="260rpx" text="&nbsp;"/>
  </view>

	<view class="school-list" v-else>
		<uv-radio-group v-model="radiovalue">
			<view class="container">
				<view class="item"  v-for="(item,index) in dataList" :key="index">
					<view class="radio">
						<uv-radio :name="item.id" >
							<template #default><view class="name">{{item.name}}</view></template>
						</uv-radio>
					</view>
				</view>
			</view>
		</uv-radio-group>
  </view>
	<!--筛选弹层-->
	<uv-popup ref="popup" @change="changeIcon" :closeable="true">
		<view class="popup-title">筛选</view>
		<view class="popup-content">
      <view class="popup-title-row" v-if="areaList.length>0">
        <text>地区</text>
      </view>
      <view class="popup-con-row">
        <view v-for="(item,index) in areaList" :key="index" class="item"
              :class="{actived:item.code === area}" @click="areaFun(item)">
          {{ item.name }}
        </view>
      </view>
      <view class="bottom-box" @click.stop>
        <button class="yellow-sure-button" style="width: 49%" @click.stop="resetForm()">重置</button>
        <button class="sure-button" @click.stop="popupSubmit()">确认</button>
      </view>
		</view>
	</uv-popup>
	<view class="check-bottom-box" @click.stop>
	  <button class="sure-button" @click.stop="submit()">确认</button>
	</view>
</view>
</template>

<script setup>
	import {getCurrentInstance,reactive, ref} from 'vue'
  import publicAPI from "@/api/law/public/public";
  import supDataScopeAPI from "@/api/law/supDataScope/supDataScope.js";
  import {onLoad} from "@dcloudio/uni-app";
    import config from "@/common/config";
    let imgMinioPath = ref(config.IMG_MINIO_PATH);
  const {proxy} = getCurrentInstance();
  const userInfo = ref(uni.getStorageSync('userInfo'));
  const keyword = ref('')
  let iconFlag = ref(false);
  const radiovalue = ref('')
  let dataList=ref([])
  const emptyFlag = ref(false);
  const queryForm = reactive({ // 查询条件
    name:'',
    params:{
      sourceIds: '',
    }
  });
  onLoad((option) => {
    if (option.radiovalue) {
      radiovalue.value=option.radiovalue;
    }
  });
  let searchFun = () => {
    getOrgCaterList();
  }
  /** 清空搜索 */
  let clearFun = () => {
    getOrgCaterList();
  }
  //获取配餐单位列表
  let getOrgCaterList = async () => {
    let res = await proxy.http.asyncPost(supDataScopeAPI.findDistrictList, {dataUserId:userInfo.value.user.id});
    if (res.code === 0 && res.data.sourceIds) {
      queryForm.params.sourceIds=res.data.sourceIds
        queryForm.name=keyword.value
        res= await proxy.http.asyncPost(publicAPI.getOrgCaterNoTenantId, queryForm);
        if (res.code === 0) {
          dataList.value=  [...res.data];
          emptyFlag.value = dataList.value.length <= 0;
        } else {
          await uni.showToast({title: res.msg, icon: 'none'});
        }
    }else {
      await uni.showToast({title: res.msg, icon: 'none'});
    }
  };
  /** 筛选-地区 */
  const area = ref('');
  const areaList = ref([]);
  let areaType = ref('');
  // 获取地区列表
  let getAreaList = async () => {
    let query = {};
    if (userInfo.value.user.org.county) { // 区
      areaType.value = '3';
      return;
    } else if (userInfo.value.user.org.city) { // 市
      areaType.value = '2';
      query.parentCode = userInfo.value.user.org.city;
    } else { // 省
      areaType.value = '1';
      query.parentCode = userInfo.value.user.org.province;
    }
    let res = await proxy.http.asyncPost(publicAPI.getAreaListByParentCode(query.parentCode));
    if (res.code === 0) {
      areaList.value = reactive(res.data);
    }
  };
  // 筛选选中
  const areaFun = (item) => {
    if (area.value === item.code) {
      area.value = ''
    } else {
      area.value = item.code;
    }
  };

	//返回把选中学校数据传回
	function submit(){
		uni.navigateBack({
		  delta: 1,
		  success: function(res) {
			let currentObj = dataList.value.filter((item=>item.id == radiovalue.value))
		    uni.$emit('schoolData', currentObj)
		  }
		})
	}

  //点击重置按钮
  function resetForm() {
    area.value = '';
    keyword.value= '';
    queryForm.name=keyword.value
    if (areaType.value === '1') {
      queryForm.cityId = area.value;
    } else {
      queryForm.countyId = area.value;
    }
    changeIcon()
    popup.value.close()
    getOrgCaterList();
  }

  let popup = ref()
  //显示筛选弹层
  function showScreen(){
    popup.value.open('bottom')
  }
  let changeIcon = () => {
    if (queryForm.countyId) {
      iconFlag.value = true;
    } else {
      iconFlag.value = false;
    }
  }
  function popupSubmit(){
    queryForm.name=keyword.value
    if (areaType.value === '1') {
      queryForm.cityId = area.value;
    } else {
      queryForm.countyId = area.value;
    }
    changeIcon()
    popup.value.close()
    getOrgCaterList();
  }

  //页面加载
  onMounted(async () => {
    getOrgCaterList();
    getAreaList();
  })


</script>
<style scoped lang="scss">
	.bottom-box{
		padding: 0;
	}
  .name {
    width: 100% !important;
    line-height: 3.4375rem;
  }
  .empty-box {
    background-color: #fff!important;
  }
  .school-list{
    height: calc(100vh - 44px - 91px - 136rpx)!important;
    overflow-y: auto!important;
  }
  .popup-con-row{
    .item{
      display: flex!important;
      align-items: center!important; /* 垂直居中 */
      justify-content: center!important; /* 水平居中，可选 */
    }
  }
</style>
